<template>
    <div class="banner">
        <ul>
            <li class="banner-item banner1">
                <img src="~assets/index/banner.jpg" alt="">

            </li>
        </ul>
        <div class="container">
            
            <div class="title" >
                    <img src="~assets/index/title.png" alt="">
            </div>
            <div class="cricle">
                <div class="line">
                    <img src="~assets/index/line.png" alt="">
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
      name:'IndexHeader',
        
        data (){
            return {
             
            }
        },
        methods: {
            toshop (e){
               window.location.href = e    
            },
            
        },
}
</script>
<style lang="stylus" scoped>
@import '~assets/varibles.styl' 
@keyframes change
    0%
        opacity 1.0
        -webkit-transform scale(1.2)
    100%
        opacity 1.0
        -webkit-transform scale(1.0)
@keyframes todown
    0%
        opacity 0
        margin-top 0
    50%
        opacity 1
        margin-top 18px
    100%
        opacity 0
        margin-top 38px   
.banner
    overflow hidden
    position relative
    .container
        width $container
        height 100%
        position absolute
        left 50%
        margin-left -600px
        top 0
        // background red
        .title
            -webkit-transform: translate3d(0, 3000px, 0);
            margin-top 370px
            width 753px
            animation bounceInUp 2s ease 1s forwards
            animation-iteration-count:1;
        .cricle
            -webkit-transform: translate3d(0, 3000px, 0);
            overflow hidden
            width 60px
            height 60px
            background url('~assets/index/circle.png')
            margin-top 90px
            animation bounceInUp 2s ease 1.2s forwards
            .line
                margin-top 18px
                animation todown 1s ease-out infinite
ul
    width 100%
    height 100vh
.banner-item
    width 100%
    height 100%
    overflow hidden
    // background red
.banner1
    // background url('~assets/index/banner1.png')
.banner-item>img
    transform scale(1.2)
    
    animation change 3s infinite 1s forwards
    animation-iteration-count:1;

</style>
